<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title>作业</title>
  <style scoped>
    /* 头部部分 */
    .navbar {
      width: 100%;
      background: black;
      height: 50px;

    }

    .navbar .container {
      width: 100%;
      min-width: 960px;
      margin: 0 auto;
      max-width: 1400px;
      height: 40px;
    }

    .navbar-inner {
      background: 0 0;
      border-radius: 0;
      border: none;
      box-shadow: none;
      width: 90%;
      margin: auto;
      padding: 5px;
    }

    .navbar-inner {
      min-height: 40px;
    }

    navbar .brand:focus,
    .navbar .brand:hover {
      text-decoration: none;
    }

    .navbar .brand {
      width: 120px;
      padding: 3px 20px;
      height: 34px;
      line-height: 34px;
      color: #ccc;
      font-weight: 700;
    }

    .breadcrumb>li,
    .navbar .brand {
      text-shadow: none;
    }

    .navbar .brand {
      display: block;
      float: left;
      padding: 10px 20px;
      position: relative;
      font-size: 20px;
      font-weight: 200;
      color: #777;
      text-shadow: 0 1px 0 #fff;
      top: 0px;
    }

    .navbar .search-query.focused,
    .navbar .search-query:focus,
    .navbar .search-query:hover {
      background-color: #fff;

    }

    .navbar .search-query {

      background: url(https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png) 4px 4px no-repeat #888;
      padding: 3px 5px 3px 22px;
      color: #666;
      border: 0;
      margin-top: 18px;
      transition: all .5s;
    }

    .navbar-search .search-query {
      padding: 4px 14px;
      margin-bottom: 0;
      font-size: 13px;
      font-weight: 400;
      line-height: 1;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
    }

    .navbar-search .search-query,
    button,
    input,
    select,
    textarea {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }


    .navbar .nav.pull-right[data-v-469af010] {
      float: right;
      margin-right: 0;
    }

    ul {
      height: 40px;
      width: 100%;
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      position: relative;

      float: left;
    }

    .navbar .nav>li {
      float: left;
       width: auto;
    }

    .navbar .nav.pull-right {
      position: absolute;
      float: right;
      margin-right: 0;
      width: 400px;
      top: 10px;
      right: 0px;
      left: 1101px;
    }

    .navbar .nav {
      position: relative;
      left: 0;
      display: block;
      float: left;
      margin: 0 10px 0 0;
    }

    .pull-right {
      float: right;
    }

    .pull-right {
      float: right;
    }

    .nav {
      margin-bottom: 20px;
      margin-left: 0;
    }

    .breadcrumb,
    .carousel-indicators,
    .dropdown-menu,
    .media-list,
    .nav,
    .pager,
    .thumbnails {
      list-style: none;
    }

    ol,
    ul {
      padding: 0;
      margin: 0 0 10px 25px;
      float: left;
    }

    user agent stylesheet ul {
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      float: left;
    }

    .navbar {
      margin-bottom: 0;
      z-index: 9;
      width: 100%;
      position: relative;
      background: #444;
      font-size: 13px;
    }

    .navbar .nav>li {
      float: left;
    }

    

    user agent stylesheet li {
      display: list-item;
      text-align: -webkit-match-parent;
      float: left;
    }

    .breadcrumb,
    .carousel-indicators,
    .dropdown-menu,
    .media-list,
    .nav,
    .pager,
    .thumbnails {
      list-style: none;
    }

    user agent stylesheet ul {
      list-style-type: disc;
      float: left;
    }

    .navbar {
      margin-bottom: 0;
      z-index: 9;
      width: 100%;
      position: relative;
      background: #444;
      font-size: 13px;
    }

    .navbar .nav>li>a {
      text-shadow: none;
      color: #fff;
      float: left;
    }

    .navbar .nav>li>a {
      float: none;
      padding: 10px 15px;
      color: #777;
      text-decoration: none;
      text-shadow: 0 1px 0 #fff;
      font-size: 5px;
      float: left;
    }

    .nav-header,
    .nav>li>a {
      display: block;
    }

    a {
      color: #08c;
      text-decoration: none;
    }

    user agent stylesheet a:-webkit-any-link {
      color: -webkit-link;
      cursor: pointer;
      text-decoration: underline;

    }

    dd,
    dt,
    li {
      line-height: 20px;
      list-style-type:none;
      width: 100%;
      float: left;
    }

    user agent stylesheet li {
      text-align: -webkit-match-parent;
    }

    .breadcrumb,
    .carousel-indicators,
    .dropdown-menu,
    .media-list,
    .nav,
    .pager,
    .thumbnails {
      list-style: none;
    }

    user agent stylesheet ul {
      list-style-type: disc;
    }

    .navbar {
      margin-bottom: 0;
      z-index: 9;
      width: 100%;
      position: relative;
      background: #444;
      font-size: 13px;
    }


    /* 内容部分 */
    .reply_count {
      width: 80px;
      display: inline-block;
      text-align: center;
      position: relative;
      left: 5px;
    }

    .count_of_visits {
      color: grey;
    }

    .count_of_replies {
      color: #9e78c0;
    }

    .wrap {
      height: 100%;
      overflow: hidden;
    }

    .content {
      height: 100%;
      margin: 100px 300px 100px 300px;
    }

    .tab-header {
      padding: 10px;
      background-color: #f6f6f6;
      border-radius: 13px 13px 0 0;
      overflow: hidden;
    }

    .tab-item {
      float: left;
      margin: 0 10px;
      cursor: pointer;
      color: #80bd01;
      font-size: 14px;
      padding: 3px;
    }

    .active {
      color: #fff;
      background: #80bd01;
      border-radius: 3px;
    }

    .tab-class {
      margin: 0 10px;
      cursor: pointer;
      color: #fff;
      background: #80bd01;
      font-size: 14px;
      padding: 3px;
      position: relative;
      left: 5px;
      border-radius: 3px 3px 3px 3px;
      overflow: hidden;
    }

    .tab-class2 {
      margin: 0 10px;
      cursor: pointer;
      background-color: #e5e5e5;
      color: #999;
      font-size: 14px;
      padding: 3px;
      position: relative;
      left: 5px;
      border-radius: 3px 3px 3px 3px;
      overflow: hidden;
      width: 100%;
    }

    .touxiang {
      width: 30px;
      height: 30px;
      border-radius: 3px;
      position: relative;
      top: 10px;
    }

    .topic_title_wrapper {
      white-space: nowrap;
      float: left;
      width: 100%;
      border: 1px;
      border-bottom: 1px solid #f0f0f0;
    }

    a:-webkit-any-link {
      color: black;
      cursor: pointer;
      text-decoration: underline;
      max-width: 70%;

      white-space: nowrap;
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      line-height: 30px;
      position: relative;
      text-decoration: none;
      left: 5px;
    }

    .last_time .user_small_avatar {
      height: 18px;
      width: 18px;
      vertical-align: middle;
      margin-right: 0.5em;
      border-radius: 3px;
      border: 0px;
    }

    .last_time .last_active_time {
      text-align: right;
      min-width: 50px;
      display: inline-block;
      white-space: nowrap;
      color: grey;
    }

    .pull-right {
      width: 100px;
      float: right;
    }

    #app {
      height: 100%;
    }

    body,
    html {
      height: 100%;
    }
    
  </style>



</head>

<body>


  <div class="wrap">
    <!-- 头部 -->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="/">

            <img src="//static2.cnodejs.org/public/images/cnodejs_light.svg">

          </a>

          <form id="search_form" class="navbar-search" action="/search">
            <input type="text" id="q" name="q" class="search-query span3" value="">
          </form>
          <ul class="nav pull-right">
            <li><a href="/">首页</a></li>

            <li><a href="/getstart">新手入门</a></li>
            <li><a href="/api">API</a></li>

            <li><a href="/about" target="">关于</a></li>


            <li><a href="/signup">注册</a></li>
            <li><a href="/signin">登录</a></li>

          </ul>
          <a class="btn btn-navbar" id="responsive-sidebar-trigger">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="tab-header">
        <div class="tab-item active">全部</div>
        <div class="tab-item">精华</div>
        <div class="tab-item">分享</div>
        <div class="tab-item">问答</div>
        <div class="tab-item">招聘</div>
        <div class="tab-item">客户端测试</div>
      </div>
      <div class="lists" id="list-item">
        <div class="list-item" style="display:block;">


          <div class="h1">
            <img class="touxiang" src="https://avatars.githubusercontent.com/u/227713?v=4&s=120" alt="" />
            <span class="reply_count pull-left">
              <span class="count_of_replies" title="回复数"> 2 </span>
              <span class="count_seperator">/</span>
              <span class="count_of_visits" title="点击数"> 27797 </span>
            </span>

            <span class="tab-class">置顶</span>

            <a class="topic_title" href="/topic/618e03abe6c91ab080916c8a" title="精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至">
              精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至
            </a>
            <a class="last_time pull-right" href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6">
              <img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/14975630?v=4&amp;s=120" />
              <span class="last_active_time">9 天前</span>
            </a>
          </div>

        </div>
        <div class="list-item">


          <div class="h2">
            <img class="touxiang" src="https://avatars.githubusercontent.com/u/958063?v=4&s=120" alt="" />
            <span class="reply_count pull-left">
              <span class="count_of_replies" title="回复数"> 2 </span>
              <span class="count_seperator">/</span>
              <span class="count_of_visits" title="点击数"> 27797 </span>
            </span>

            <span class="tab-class">置顶</span>

            <a class="topic_title" href="/topic/5fdb44d70f99cb37f45e3410" title="【2021/11/26】请大家遵纪守法，勿发布不合规内容">
              【2021/11/26】请大家遵纪守法，勿发布不合规内容
            </a>
            <a class="last_time pull-right" href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6">
              <img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/91187541?v=4&s=120" />
              <span class="last_active_time">7天前</span>
            </a>
          </div>

        </div>

        <div class="list-item">


          <div class="h3">
            <img class="touxiang" src="https://avatars.githubusercontent.com/u/227713?v=4&s=120" alt="" />
            <span class="reply_count pull-left">
              <span class="count_of_replies" title="回复数"> 2 </span>
              <span class="count_seperator">/</span>
              <span class="count_of_visits" title="点击数"> 27797 </span>
            </span>

            <span class="tab-class">置顶</span>

            <a class="topic_title" href="/topic/618e06dbe6c91a00a3916cae" title="【望周知，求扩散】淘宝 NPM 镜像站喊你切换新域名啦">
              【望周知，求扩散】淘宝 NPM 镜像站喊你切换新域名啦
            </a>
            <a class="last_time pull-right" href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6">
              <img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/83209772?v=4&s=120" />
              <span class="last_active_time">9 天前</span>
            </a>
          </div>

        </div>
        <div class="list-item">


          <div class="h4">
            <img class="touxiang" src="https://avatars.githubusercontent.com/u/2081487?v=4&s=120" alt="" />
            <span class="reply_count pull-left">
              <span class="count_of_replies" title="回复数"> 16</span>
              <span class="count_seperator">/</span>
              <span class="count_of_visits" title="点击数"> 151648 </span>
            </span>

            <span class="tab-class">置顶</span>

            <a class="topic_title" href="/topic/6108bbc2a5d29d175c2d4208" title="2021 Node.js 开发者问卷调查">
              2021 Node.js 开发者问卷调查
            </a>
            <a class="last_time pull-right" href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6">
              <img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/19908330?v=4&s=120" />
              <span class="last_active_time">10 天前</span>
            </a>
          </div>

        </div>
        <div class="list-item">


          <div class="h5">
            <img class="touxiang" src="https://avatars.githubusercontent.com/u/9312044?v=4&s=120" alt="" />
            <span class="reply_count pull-left">
              <span class="count_of_replies" title="回复数"> 2</span>
              <span class="count_seperator">/</span>
              <span class="count_of_visits" title="点击数"> 528 </span>
            </span>

            <span class="tab-class2">分享</span>

            <a class="topic_title" href="/topic/61a8275d3dbd66727c319206" title="VS Code 版 CNode 已上线">
              VS Code 版 CNode 已上线
            </a>
            <a class="last_time pull-right" href="/topic/618e03abe6c91ab080916c8a#619dfe7ad9ec265579a7d2f6">
              <img class="user_small_avatar" src="https://avatars.githubusercontent.com/u/19908330?v=4&s=120" />
              <span class="last_active_time">19小时前</span>
            </a>



            
          </div>


         

        </div>





      </div>
    </div>

  </div>




</body>
<!-- 此部分不太懂，向老师询问后老师给出用innerHTml来进行信息的拼接，但是还是没太弄明白向同学请教后自己更改之后成功了 -->
<script type="text/javascript">  //此部分复制消息
  
    var arr = document.getElementsByClassName("list-item");//获取所有消息放进数组
    var htmls = "";
    for (let i = 0; i <= arr.length - 1; i++) {//循环拼接
      htmls += '<li class="list-item">' + arr[i].innerHTML + '</li>';
     
    }
    for (let j = 0; j <= 1; j++) {//循环2的j次方遍
      htmls += htmls;
    }
  
     document.getElementById("list-item").innerHTML = htmls;//加在网页上
</script>

<script>
  const doms = document.getElementsByClassName("tab-item")
  const listDoms = document.getElementsByClassName('list-item')
  const h1 = document.getElementsByClassName("h1")
  const h2 = document.getElementsByClassName("h2")
  const h3 = document.getElementsByClassName("h3")
  const h4 = document.getElementsByClassName("h4")
  const h5 = document.getElementsByClassName("h5")
  for (let i = 1; i <= doms.length - 1; i++) {//获取菜单栏的点击切换
    doms[i].addEventListener("click", function () {
      for (let j = 0; j <= doms.length - 1; j++) {//修改显示状态
        doms[j].className = "tab-item"
      }
      this.className = "tab-item active"
      for (let k = 0; k <= h1.length - 1; k++) {//根据菜单显示状态，先全部隐藏
        h1[k].parentNode.style.display = "none"
        h2[k].parentNode.style.display = "none"
        h3[k].parentNode.style.display = "none"
        h4[k].parentNode.style.display = "none"
        h5[k].parentNode.style.display = "none"
      }
      if (i == 1)                                  
        for (let p = 0; p < h1.length; p++) {//判断菜单显示状态，根据状态显示对应数据
          h1[p].parentNode.style.display = "block"
        }
      if (i == 2)
        for (let p = 0; p < h2.length; p++) {
          h2[p].parentNode.style.display = "block"
        }
      if (i == 3)
        for (let p = 0; p < h3.length; p++) {
          h3[p].parentNode.style.display = "block"
        }
      if (i == 4)
        for (let p = 0; p < h4.length; p++) {
          h4[p].parentNode.style.display = "block"
        }
      if (i == 5)
        for (let p = 0; p < h5.length; p++) {
          h5[p].parentNode.style.display = "block"
        }


    })
  }
  doms[0].addEventListener('click', function () {//设定特殊情况，将数组越界情况提出来，此处为点击全部的情况
    for (let j = 0; j <= doms.length - 1; j++) {
      doms[j].className = "tab-item"
    }
    this.className = "tab-item active"
    for (let k = 0; k <= h1.length - 1; k++) {//全部显示
      h1[k].parentNode.style.display = "block"
      h2[k].parentNode.style.display = "block"
      h3[k].parentNode.style.display = "block"
      h4[k].parentNode.style.display = "block"
      h5[k].parentNode.style.display = "block"
    }

  })


</script>


</html>